<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/reading/TeacherProgramB.css" />
		<link rel="stylesheet" href="../../css/vCloak.css" />

	</head>

	<body>

		<div class="mui-content">
			<div class="main" v-if="list!=''">
				<div class="select">
					<div type="button" class="mui-btn type">
						<div class="selectiontype" style="color: #666666;" :planUid="title.planUid" v-text="title.planName"></div>
						<div class="down"></div>
					</div>
					<!--<div type="button" class="mui-btn popular">
					<div class="selectiontype" style="color: #666666;">正在读</div>
					<div class="down"></div>
				</div>-->
				</div>

				<div class="genre">
					<span id="genreScroll">
						<div class="vv" v-for="list in list" :planUid="list.planUid" v-cloak>{{list.planName}}</div>
					</span>
				</div>

				<!--；列表-->
				<div id="offCanvasContentScroll" class="main mui-scroll-wrapper">
					<!--<div class="aaa" style="">-->
					<div class="mui-scroll">
						<div class="mainclass" v-for="data in data" :bookUid="data.bookUid" :bookId="data.bookId">
							<div class="format" v-cloak><img :src="data.bookPic" /></div>
							<div class="detailed">
								<div class="title">
									<div class="title_name" v-cloak>{{data.bookName}}</div>
									<!--<div class="type typee"  v-if="data.completeRate == 100">{{data.completeRate}}%</div>-->
									<!--v-else-if="data.state != 1 && data.state != 0"-->
									<div class="type" v-cloak>{{data.completeRate}}%</div>
								</div>
								<div class="data">
									<div class="type ziff" v-cloak>阅读进度</div>
									<div class="time" v-cloak>{{data.beginDate}}</div>
									<div class="time" v-cloak>{{data.endDate}}</div>
								</div>

								<div class="operation  beginning" v-if="data.state == 0">
									<div class="score" v-cloak>{{data.stateStr}}</div>
									<span class="scoredor" v-cloak>开始打卡</span>
								</div>
								<div class="operation start" v-else-if="data.state == 1">
									<div class="score" v-cloak>{{data.stateStr}}</div>
									<span class="scoredor punchClock" v-cloak>开始打卡</span>
								</div>
								<div class="operation conduct" v-else-if="data.state == 2">
									<div class="score" v-cloak>{{data.stateStr}}</div>
									<span class="scoredor punchClock" v-cloak>阅读打卡</span>
								</div>
								<div class="operation complete" v-else-if="data.state === 3 && data.isFinished == false">
									<div class="score" v-cloak>{{data.stateStr}}</div>
									<span class="scoredor" v-cloak>开始闯关</span>
								</div>
								<div class="operation complete" v-else-if="data.state === 3 && data.isFinished == true">
									<div class="score" v-cloak>{{data.stateStr}}</div>
									<span class="scoredor" v-cloak>查看详情</span>
								</div>
								<div class="operation overdue" v-else>
									<div class="score" v-cloak>{{data.stateStr}}</div>
									<span class="scoredor punchClock" v-cloak>逾期</span>
								</div>
							</div>
						</div>

					</div>
					<!--</div>-->
				</div>
			</div>
		</div>

		<iframe src="../stacks/noplan.html" width="" height="" class="noplan" style="display:none;"></iframe>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common/common.js"></script>
		<script type="text/javascript">
			//									window.addEventListener('refresh', function(e){//执行刷新
			//  location.reload();
			//});
			mui.init()
			mui.plusReady(function() {

				$(".choice").on("tap", function() {
					mui.openWindow({
						url: '../reading/release.html',
						id: '../reading/release.html'
					});
				})
				window.addEventListener("home", function() {
					location.reload();
				})
				window.addEventListener('Chapternumber', function(e) { //执行刷新
					location.reload();
				});
				window.addEventListener('Taskdetails', function(e) { //执行刷新
					location.reload();
				});

				$(".noplan").height($(window).height())
				var mask = mui.createMask(reduction)
				var teacherProgram = new Vue({
					el: '.main',
					data: {
						list: [],
						data: [],
						title: ''
					},
					updated: function() {
						mui('.mui-scroll-wrapper').scroll()
					}
				})

				$(document).on("tap", ".punchClock", function(e) {
					var obj = {};
					obj.planuid = $(".selectiontype").attr("planuid");
					obj.bookuid = $(this).parents(".mainclass").attr("bookuid")
					obj.source = 1
					common.open("Chapternumber.html", "Chapternumber.html", obj)
					e.stopPropagation()
				})

				$(document).on("tap", ".complete .scoredor", function(e) {
					var obj = {};
					obj.planuid = $(".selectiontype").attr("planuid");
					obj.bookuid = $(this).parents(".mainclass").attr("bookuid")
					obj.source = 1
					common.open("../Taskdetails/Taskdetails.html", "../Taskdetails/Taskdetails.html", obj)
					e.stopPropagation()
				})
				$(document).on("tap", '.mainclass', function(e) {
					if(!$(e.target).is(".punchClock")) {
						var obj = {};
						obj.planuid = $(".selectiontype").attr("planuid");
						obj.bookuid = $(this).attr("bookuid")
						obj.source = 1
						common.open("../Taskdetails/Taskdetails.html", "../Taskdetails/Taskdetails.html", obj)
						e.stopPropagation()
					}
				})

				$(this).on("tap", ".select", function(e) {
					var index = $(this).index()
					if($(".genre").eq(index).height() != 0) {
						reduction()
						mask.close()
						return
					}
					var height = $(".genre").eq(index).find("div").eq(0).height() * $(".genre").eq(index).find("div").length
					$(".genre").eq(index).css("height", height)
					$("#genreScroll").height(height)
					$(".down").eq(index).css("transform", "rotate(180deg)")
					$(this).find("div").css({
						"color": "#21B0FD",
						"border-top-color": "#21B0FD"
					})
					mask.show()
					e.stopPropagation()
				})
				mui('#offCanvasContentScroll').scroll();
				common.ajax("student/queryTeacherPlan", {
					uid: common.uid,
					token: common.token
				}, function(data) {
					if(data.code == 200) {
						if(data.data.length == 0) {
							$(".mui-content").hide()
							$(".noplan").show()
							return
						} else {
							$(".noplan").hide()
							$(".mui-content").show()
						}
						teacherProgram.list = data.data
						teacherProgram.title = data.data[0]
						genreajax(data.data[0].planUid)
						setTimeout(function() {
							$(".genre").on("tap", "div", function(e) {
								teacherProgram.data = []
								$(".selectiontype").text($(this).text())
								$(".selectiontype").attr("planuid", $(this).attr("planuid"))
								reduction()
								mask.close()
								genreajax($(this).attr("planuid"))
								e.stopPropagation()
							})
						}, 300)
					} else {
						mui.toast(data.message)
					}
				}, 'get')

				function genreajax(txt) {
					common.ajax("student/queryTeacherPlanBook", {
							uid: common.uid,
							token: common.token,
							planUid: txt
						},
						function(data) {
							if(data.code == 200) {
								teacherProgram.data = data.data
							} else {
								mui.toast(data.message)
							}
						}, "get")
				}

				function reduction() {
					$(".genre").css("height", 0)
					$(".down").css("transform", "rotate(0deg)")
					$(".select").find("div").css({
						"color": "#333",
						"border-top-color": "#333"
					})
				}
			})
		</script>
	</body>

</html>